<template>
	<div class="mine-wallet">
        <myNavbar title="福利卡"></myNavbar>
		<div class="shopCard-top">
			<div class="page-section page-section-spacing swiper" v-if="haveShopCard">
				<slider class="banner" infinite="false" show-indicators="true" @change="swiperChange">
					<div class="banner-frame" v-for="item in shopCardInfo">
						<div :class="['shopCard-bg', [item.isAllshopCard == true ? 'shopCard-green' : 'shopCard-red']]">
							<image class="shopCard-bg-image" src="http://cdn.rzico.com/v4.0/wallet-cardBg.png"></image>
							<text class="shopCard-text1">可用余额</text>
							<div class="shopCard-text4">
								<div class="shopCard-text4-border1">
									<text class="shopCard-text4-border2">{{ item.memo }}</text>
								</div>
							</div>
							<text class="shopCard-text2">￥{{ item.balance }}</text>
							<text class="shopCard-text5">{{ item.companyName }}</text>
							<text class="shopCard-text6">{{ item.tag }}</text>
							<text class="shopCard-text3">有效期 {{ item.startDate }}~{{ item.endDate }}</text>
						</div>
					</div>
				</slider>
<!--				<button-->
<!--					:text="isTimeout ? '已过期' : '去使用'"-->
<!--					:class="['shopCard-button', { timeout: isTimeout }]"-->
<!--					@click="goShopping"-->
<!--				></button>-->
			</div>
			<div v-else>
				<div class="shopCard-bg shopCard-grey">
					<image class="shopCard-bg-image" src="http://cdn.rzico.com/v4.0/wallet-cardBg.png"></image>
					<text class="shopCard-text7">当前暂时无福利</text>
					<div class="shopCard-text8">
						<text class="shopCard-text8-border2">敬</text>
						<text class="shopCard-text8-border2">请</text>
						<text class="shopCard-text8-border2">期</text>
						<text class="shopCard-text8-border2">待</text>
					</div>
				</div>
			</div>
		</div>
		<scroller>
			<div class="shopCard-bottom ">
				<div v-for="item in shopCardDetail">
					<div class="shopCard-bottom-list">
						<image class="shopCard-bottom-list-image" :src="item.icon"></image>
						<div class="bottom-item">
							<div class="shopCard-bottom-list-top">
								<text class="shopCard-bottom-list-top1">{{ item.memo }}</text>
								<text :class="['shopCard-bottom-list-top2', [item.isIncome == true ? 'redColor' : '']]">￥ {{ item.result }}</text>
							</div>
							<div class="shopCard-bottom-list-bottom">
								<text class="shopCard-bottom-list-bottom-text">{{ item.createDate }}</text>
								<text class="shopCard-bottom-list-bottom-text">余额：{{ item.balance }}</text>
							</div>
						</div>
					</div>
				</div>
			</div>
			<loading class="loading" @loading="onloading" :display="loadinging ? 'show' : 'hide'">
				<text class="indicator-text">Loading ...</text>
				<loading-indicator class="indicator"></loading-indicator>
			</loading>
		</scroller>

		<!-- <productAttributes /> -->
	</div>
</template>
<script>
import { cardBillList, list} from '../../../api/card'
import myNavbar from '../../../components/myNavbar/myNavbar.vue'
export default {
	name: '',
	components: {
	    myNavbar
    },
	filters: {}, // 过滤器
	data() {
		return {
			haveShopCard: false,
			currentId: '', //当前的卡id
			isTimeout: false, //卡是否过期
			iconUrl: ['wallet-consumption.png', 'wallet-income.png'],
			shopCardDetail: [
				// {
				// 	isIncome: true,
				// 	icon: 'http://cdn.rzico.com/v4.0/wallet-consumption.png',
				// 	memo: '购物消费',
				// 	remark: '电冰箱',
				// 	result: '-300',
				// 	date: '05-18 20:30:20',
				// 	balance: 200
				// },
				// {
				// 	isIncome: true,
				// 	icon: 'http://cdn.rzico.com/v4.0/wallet-income.png',
				// 	memo: '充值入账',
				// 	remark: '五一节福利',
				// 	result: 500,
				// 	date: '05-18 20:30:20',
				// 	balance: 200
				// },
				// {
				// 	isIncome: false,
				// 	icon: 'http://cdn.rzico.com/v4.0/wallet-timeout.png',
				// 	memo: '购物消费',
				// 	remark: '电冰箱',
				// 	result: 300,
				// 	date: '05-18 20:30:20',
				// 	balance: 200
				// }
			],
			isAllshopCard: true,
			indicatorDots: '',
			shopCardInfo: [
				// {
				// 	isAllshopCard: true,
				// 	name: '五一节五一节福利',
				// 	balance: 500,
				// 	companyName: '中国移动莆田分公司',
				// 	tag: '全品类通用',
				// 	memo: '7.07测试福利',
				// 	startDate: '2020-05-20~2020-12-31'
				// },
				// {
				// 	isAllshopCard: false,
				// 	name: '五一节福利',
				// 	balance: 500,
				// 	companyName: '中国移动莆田分公司',
				// 	tag: '全品类通用',
				// 	startDate: '2020-05-20~2020-12-31'
				// },
				// {
				// 	isAllshopCard: false,
				// 	name: '五一节福利',
				// 	balance: 500,
				// 	companyName: '中国移动莆田分公司',
				// 	tag: '全品类通用',
				// 	startDate: '2020-05-20~2020-12-31'
				// }
			],
			loadinging: false,
			maxPageNum: 0,
			pageNum: 1,
			pageSize: 10,
		};
	},
	created() {
		this.getCardList();
	},
	methods: {
		getCardList() {
			list({
				cardType: 1,
				memberId: app.config.params.memberId,
				pageSize: 10000
			})
				.then(res => {
					if (res.type == 'success') {
						if (res.data.data.length > 0) {
							this.haveShopCard = true
							this.shopCardInfo = this.formatShopCardInfo(res.data.data)
							this.currentId = this.shopCardInfo[0].id;
							if (this.shopCardInfo[0].timeout) {
								this.isTimeout = true
							}
							this.getCardBill(this.currentId);
						}
					}
				})
				.catch(error => {

				});
		},
		//获取账单数据
		getCardBill(cardId) {
			this.loadinging = true;
			let params = {
				pageNum: this.pageNum,
				pageSize: this.pageSize,
				cardId: cardId,
			};
			cardBillList(params)
				.then(res => {
					if (res.type == 'success') {
						this.formatShopCardDetail(res.data.data).forEach(item => {
							this.shopCardDetail.push(item)
						})
						// this.shopCardDetail = this.shopCardDetail.concat(this.formatShopCardDetail(res.data.data))
						eeui.loadingClose();
						this.loadinging = false;
					}
				})
				.catch(error => {
					this.loadinging = false;
				});
		},
		// 触底加载
		onloading() {
			if (this.loadinging == false) {
				this.pageNum += 1;
				// modal.toast({ message: '加载中', duration: 1 });
				eeui.loading();
				this.getCardBill(this.currentId);
			}
		},

		//轮播滚动
		swiperChange (e) {
			let shopCardInfo = this.shopCardInfo;
			// console.info(JSON.stringify(shopCardInfo))
			// console.info(JSON.stringify(e.detail.current))
			let index = parseInt(e.index);
			let id = shopCardInfo[index].id;
			this.currentId = id;
			if (this.shopCardInfo[index].timeout) {
				this.isTimeout = true
			} else {
				this.isTimeout = false
			}
			// console.info(JSON.stringify(id))
			this.shopCardDetail = []
			this.pageNum = 1,
			this.getCardBill(id);
		},
		//goShopping
		goShopping() {
			let shopCardInfo = this.shopCardInfo;
			if (this.isTimeout == false) {
				if (shopCardInfo.length > 0) {
					shopCardInfo.map(item => {
						if (this.currentId == item.id) {
							if (item.isAllshopCard) {
								eeui.openPage({ url: 'root://pages/index.js', swipeBack:'false' ,statusBarType: 'immersion',statusBarStyle:false}, result => {});
							} else {
								// let id = this.currentId
								let params = {
									tagIds: item.tagIds,
									name: item.memo
								}
								eeui.openPage({ url: 'root://pages/member/specialArea/specialArea.js', params ,statusBarType: 'immersion',statusBarStyle:false}, result => {});
							}
						}
					});
				}
			}
		},
		//数据转化
		formatShopCardInfo(data) {
			if (data.length > 0) {
				data.map(item => {
					item.timeout = false;
					if (item.endDate < Date.now()) {
						item.timeout = true;
					}
					item.startDate = this.formatDate2day(item.startDate);
					item.endDate = this.formatDate2day(item.endDate);
					item.companyName = '望岳科技有限公司';
					if (item.tags.length > 0) {
						item.tag = '仅限购买部分商品';
						item.isAllshopCard = false;
					} else {
						item.tag = '适用购买全场商品';
						item.isAllshopCard = true;
					}
					item.tagIds = [];
					if (item.tags.length > 0) {
						item.tags.map(item1 => {
							item.tagIds.push(item1.id);
						});
						// item.tagIds.push(8)
					}
				});
				this.currentId = data[0].id;
				this.indicatorDots = data.length
			}
			return data;
		},
		formatShopCardDetail(data) {
			if (data.length > 0) {
				data.map(item => {
					item.createDate = this.formatTime(item.createDate);
					item.result = (item.credit - item.debit).toFixed(2);
					item.balance = Number(item.balance).toFixed(2);
					if (item.type == 0) {
						item.tag = '充值-';
						item.isIncome = true;
						item.icon = 'http://cdn.rzico.com/v4.0/wallet-income.png';
					} else if (item.type == 2) {
						item.tag = '';
						item.isIncome = true;
						item.icon = 'http://cdn.rzico.com/v4.0/wallet-income.png';
					} else if (item.type == 1) {
						item.tag = '';
						item.isIncome = false;
						item.icon = 'http://cdn.rzico.com/v4.0/wallet-consumption.png';
					}
				});
			}
			return data;
		},
		//时间格式化器
		formatDate2day(val) {
			let date = new Date(val);
			let y = date.getFullYear();
			let MM = date.getMonth() + 1;
			MM = MM < 10 ? '0' + MM : MM;
			let d = date.getDate();
			d = d < 10 ? '0' + d : d;
			return y + '-' + MM + '-' + d;
		},

		formatDate2Time(val) {
			let date = new Date(val);
			let y = date.getFullYear();
			let MM = date.getMonth() + 1;
			MM = MM < 10 ? '0' + MM : MM;
			let d = date.getDate();
			d = d < 10 ? '0' + d : d;
			let h = date.getHours();
			h = h < 10 ? '0' + h : h;
			let m = date.getMinutes();
			m = m < 10 ? '0' + m : m;
			let s = date.getSeconds();
			s = s < 10 ? '0' + s : s;
			return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s;
		}
	}
};
</script>

<style scoped>
.page-navbar {
	width: 750px;
	height: 90px;
}
.page-navbar-title {
	color: #ffffff;
	font-size: 28px;
}

.mine-container {
	position: relative;
	background-color: rgb(248, 248, 248);
}

.shopCard-top {
	width: 750px;
	background-color: #fcf8f5;
	align-items: center;
	padding: 50px 0 20px 0;

}

.page-section {
	position: relative;
	margin: 0 auto;
	width: 620px;
	/*height: 330px;*/
	/* border: 1px solid rgba(127, 91, 36, 1); */
	border-radius: 26px;
}

.banner {
	height: 330px;
}

.shopCard-bg {
	position: relative;
	margin: 0 auto;
	width: 620px;
	height: 330px;
	/* border: 1px solid rgba(127, 91, 36, 1); */
	border-radius: 26px;
}

.shopCard-green {
	background-image: linear-gradient(to top right, #799e8f, #6d9584);
}

.shopCard-red {
	background-image: linear-gradient(to top right, #ea706a, #db625d);
}

.shopCard-grey {
	background-image: linear-gradient(to top right, #b0adbc, #9c99a9);
}

.shopCard-bg-image {
	position: absolute;
	top: 2px;
	left: 2px;
	width: 620px;
	height: 330px;
}

.shopCard-text1 {
	position: absolute;
	font-size: 30px;
	font-family: STSongti;
	font-weight: 900;
	/* color: #7a4a00; */
	line-height: 42px;
	text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.3);
	z-index: 100;
	left: 50px;
	top: 50px;
}

.shopCard-text2 {
	position: absolute;
	font-size: 42px;
	font-family: PingFangSC;
	font-weight: bold;
	color: #efddac;
	text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.3);
	line-height: 42px;
	z-index: 100;
	top: 155px;
	left: 50px;
}

.shopCard-text2 text {
	font-size: 30px;
}

.shopCard-text3 {
	position: absolute;
	font-size: 20px;
	font-family: STSongti;
	font-weight: 900;
	/* color: #7a4a00; */
	line-height: 42px;
	text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.3);
	z-index: 100;
	right: 30px;
	bottom: 30px;
}

.shopCard-text4 {
	position: absolute;
	font-size: 30px;
	font-family: STSongti;
	font-weight: 900;
	color: #fff;
	line-height: 42px;
	text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.3);
	z-index: 100;
	right: 50px;
	top: 50px;
}

.shopCard-text4-border1 {
	/* position: absolute; */ /* top:-3px;
        left:-8px; */ /* display: block; */
	padding: 2px 2px;
	/* height: 50px; */
	border-width: 1px;
	border-solid: solid;
	border-color: #ebb3b1;
}

.shopCard-text4-border2 {
	/* position: relative; */ /* top:-10px; */ /*left:-5px; */ /* display: block; */
	padding: 13px 24px;
	/* height: 56px; */
	border-width: 1px;
	border-solid: solid;
	border-color: #ebb3b1;
	color: #fff;
	font-size: 30px;
	font-family: STSongti;
	font-weight: 900;

}

.shopCard-text5 {
	position: absolute;
	font-size: 20px;
	font-family: STSongti;
	font-weight: 900;
	/* color: #7a4a00; */
	line-height: 42px;
	text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.3);
	z-index: 100;
	right: 30px;
	bottom: 55px;
}

.shopCard-text6 {
	position: absolute;
	font-size: 20px;
	font-family: STSongti;
	font-weight: 900;
	/* color: #7a4a00; */
	line-height: 42px;
	text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.3);
	left: 50px;
	bottom: 30px;
}

.shopCard-text7 {
	/* width: 100%; */
	/* align-items: center; */
	margin-top: 93px;
	text-align: center;
	letter-spacing: 10px;
	font-size: 28px;
	font-family: Songti SC;
	font-weight: 900;
	color: #f9f4eb;
	line-height: 42px;
	opacity: 0.9;
}

.shopCard-text8 {
	margin-top: 45px;
	text-align: center;
	flex-direction: row;
	justify-content: center;
}

.shopCard-text8-border2 {
	text-align: center;
	font-size: 40px;
	font-family: Songti SC;
	font-weight: 900;
	color: rgba(254, 254, 254, 1);
	/* display: inline-block; */
	width: 57px;
	height: 57px;
	margin: 0 10px;
	padding: 3px;
	border-width: 1px;
	border-solid: solid;
	border-color: #ffffff;
	border-radius: 57px;
}


.timeout {
	color: rgb(94, 93, 93);
	background-image: linear-gradient(to top, rgb(161, 161, 161), rgb(223, 223, 223));
}

.shopCard-bottom {
	font-size: 32px;
	/* margin-top: 20px; */
	/* background-image: linear-gradient(to top, #FF560C , #FE8003); */
	border-radius: 16px;
	letter-spacing: 5px;
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 20px;
}

.shopCard-bottom-list {
	display: flex;
	flex-direction: row;
	align-items: center;
	height: 125px;
}

.bottom-item {
	width: 604px;
	display: flex;
	justify-content: center;
}

.shopCard-bottom-list-image {
	width: 66px;
	height: 66px;
	margin-right: 20px;
}

.shopCard-bottom-list-top {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	padding-bottom: 5px;
}

.shopCard-bottom-list-top1 {
	font-size: 28px;
	font-family: PingFangSC;
	font-weight: 400;
	color: #1a1a1e;
	/* border: #6d9584 solid 1px; */
	/* height: 40px; */
	max-width: 450px;
	display: -webkit-box;
	word-break: break-all;
	-webkit-box-orient: vertical;
	text-overflow: ellipsis;
	overflow: hidden;
	lines: 2;
}

.shopCard-bottom-list-top2 {
	font-size: 24px;
	font-weight: bold;
	color: #1a1a1e;
}

.shopCard-bottom-list-bottom {
	/* padding-top: 10px; */
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	font-size: 24px;
	font-weight: 400;
	color: #1a1a1e;
	opacity: 0.3;
}
.shopCard-bottom-list-bottom-text{
	font-size: 24px;
	font-weight: 400;
	color: #1a1a1e;
}
.redColor {
	color: #ea716a;
}


.shopCard-button {
	/* width: 260px; */
	margin-top: 40px;
	margin-left: 190px;
	margin-right: 190px;
	height: 90px;
	background-color: #07c160;
	color: #ffffff;
	border: 10px;
    margin-bottom:20px;
}
.loading {
	width: 750px;
	display: -ms-flex;
	display: -webkit-flex;
	display: flex;
	-ms-flex-align: center;
	-webkit-align-items: center;
	-webkit-box-align: center;
	align-items: center;
}
.indicator {
	margin-top: 16px;
	height: 40px;
	width: 40px;
	color: blue;
}
</style>
